<template>
	<view class="container" >
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px',font-size:15px}" :title="sample.name" @clickLeft="back">
			<block slot="right">
				<view class="city">
					<text style="font-size: 15px;" @click="fallback">提交</text>
				</view>
			</block>
		</uni-nav-bar>
		<uni-section title="样品流转退回" type="line">
			<view class="example">
				<uni-easyinput type="textarea" autoHeight v-model="reason" placeholder="请输入退回是由说明"></uni-easyinput>
			</view>
		</uni-section>
		<u-modal :show="showConfirmModal" title="样品退回确认" :showCancelButton="true"
			 :content="'确认将样品: ['+sample.name+']\n退回?'" @cancel="closeModal"
			 @confirm="confirm" :asyncClose="false">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reason:'',
				sample:{},
				showConfirmModal:false
			}
		},
		onLoad(option) {
			// 加载样品存放地点(字典数据，Location)
			this.loadSampleInfo(option.id);
		},
		computed: {},
		methods: {
			fallback(){
				this.showConfirmModal = true;
			},
			confirm(){
				var this_ = this; //存储this
				this.$u.api.fallbackSample({'id':this_.sample.id,'consumer':this_.reason}).then(res=>{
					this_.$u.toast('退回成功');
					this_.showConfirmModal = false;
					this_.back();
				});
			},
			closeModal(){
				this.showConfirmModal = false;
			},
			loadSampleInfo(sampleId){
				var this_ = this;
				this.$u.api.querySampleInfo(sampleId).then(res=>{
					this_.sample = res.data;
				});
			},
			back(){
				this.backPageRefresh();
			}
		}
	}
</script>

<style>
	.uni-section {
		margin-top: 0px !important;
		background-color: #eee;
	}

	.example {
		background-color: white;
		padding: 10px 20px 15px 20px;
	}

	.segmented-control {
		margin-bottom: 10px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
